<!DOCTYPE html>
<html>
<head>
    <title>OpenSeadragon Custom Request Headers Demo</title>
    <script type="text/javascript" src='../../build/openseadragon/openseadragon.js'></script>
    <script type="text/javascript" src='../lib/jquery-1.9.1.min.js'></script>
    <style type="text/css">

        .osd-viewer {
            width: 800px;
            height: 600px;
        }

    </style>
</head>
<body>
    <p>
        Demo of how the loadTilesWithAjax and ajaxHeaders options as well as the getTileHeaders() method on TileSource can be applied.
    </p>
    <p>
        Examine the network requests in your browser developer tools to see the custom headers sent with each request.
    </p>
    <div id="contentDiv" class="osd-viewer"></div>
    <script type="text/javascript">
        // These values are generated by a script that concatenates all the tile files and records
        // their byte ranges in a multi-dimensional array.
        var tileManifest  = {"tileRanges":[[[[0,3467]]],[[[3467,6954]]],[[[344916,348425]]],[[[348425,351948]]],[[[351948,355576]]],[[[355576,359520]]],[[[359520,364663]]],[[[364663,374196]]],[[[374196,407307]]],[[[407307,435465],[435465,463663]],[[463663,491839],[491839,520078]]],[[[6954,29582],[29582,50315],[50315,71936],[71936,92703]],[[92703,113385],[113385,133265],[133265,154763],[154763,175710]],[[175710,197306],[197306,218807],[218807,242177],[242177,263007]],[[263007,283790],[283790,304822],[304822,325691],[325691,344916]]]],"totalSize":520078}

        // This tile source demonstrates how you can retrieve individual tiles from a single file
        // using the Range header.
        var myCustomTileSource = {
            width: 1000,
            height: 1000,
            tileWidth: 254,
            tileHeight: 254,
            tileOverlap: 1,
            maxLevel: 10,
            minLevel: 0,
            // The tile URL is always the same. Only the Range header changes
            getTileUrl: function () {
                return "/test/data/testpattern.blob";
            },
            // This method will send the appropriate range header for this tile based on the data
            // in tileByteRanges.
            getTileAjaxHeaders: function(level, x, y) {
                return {
                    Range: "bytes=" + tileManifest.tileRanges[level][x][y].join("-") + "/" + tileManifest.totalSize
                };
            },
        };

        var viewer = OpenSeadragon({
            id: "contentDiv",
            prefixUrl: "../../build/openseadragon/images/",
            showNavigator: true,
            loadTilesWithAjax: true,
            ajaxHeaders: {
                // Example of using the viewer-level ajaxHeaders option
                // for providing an authentication token.
                "Authentication": "Bearer MY_AUTH_TOKEN"
            }
        });

        viewer.addTiledImage({
            // The headers specified here will be combined with those in the Viewer object (if any)
            ajaxHeaders: {
                "X-My-TiledImage-Header": "Something"
            },
            tileSource: myCustomTileSource
        });


    </script>
</body>
</html>
